<title></title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<head>
<style type="text/css">  
    body{  
        background:#fbfbfb;  
    }  
    #dplockwapp{  
        height:29px;position:relative;text-align:left;background:#fff;padding:3px;border:1px solid #ccc;  
    }  
    #dplockbtn{  
        background-attachment:fixed;  
        display:inline-block;height:29px;width:40px;border-left:1px solid #ccc;cursor:pointer;background:url(img/arr-btn.png) -42px 0px no-repeat;  
    }  
    #dplockbtn:hover{  
        background-position-y:-48px;  
    }  
</style>  
<script src="lib/jquery-1.7.2.min.js" type="text/javascript"></script>  
<script type="text/javascript">
    $(function(){
        var fin = false; // 解锁完成判断  
        var i_x = 0;  // 初始鼠标x坐标  
        var max = $("#dplockwapp").width() - $("#dplockbtn").width();  
        // 滑动解锁脚本  
        $("#dplockbtn").mousedown(function(){
            if(!fin){
            	listen = true; // 如果解锁未完成 监听鼠标
            }   
            document.onmousemove = function(e){
                if(listen){  
                    if(i_x == 0){
                    	i_x = e.pageX; // 初始化x坐标  
                    }
                    var ml = e.pageX - i_x; // 移动距离  
                    ml = ml > 0 ? (ml > max ? max : ml) : 0; // 距离判断  
                    $("#dplockbtn").css("margin-left",ml + "px");
                    // ML == max 时完成解锁  
                    if(ml == max) {  
                        fin = true;
                        listen = false;
                        // 解锁完毕
                        $("#dplock").html("解锁成功");
                    }  
                }  
            }  
            $(document).mouseup(function(){ 
                listen = false;  
            });  
        });  
    });  
</script>  
</head>
  
<div id="dplock" style="width:300px;margin:300px auto;">  
    <div id="dplockwapp">  
        <a id="dplockbtn"></a>  
    </div>  
</div>  